import React, { Component } from 'react'
import styles from '../style/index.less';
import CommonEchartComp from '../../components/CommonEchartComp';

export default class EchartsPie extends Component {

  // echarts项配置
  echartsConfig = {
    hotlinePercentage: {
      title: '热线占比情况',
      options: ['年', '月', '日'],
      color: ['#975FE5', '#64AAEA', '#FBD437', '#4482FF']
    },
    reflectCategory: {
      title: '反映类别',
      options: ['年', '月', '日'],
      color: ['#A4E32A', '#E7472C', '#00CEDB', '#F04864', '#975FE5', '#4ECB73', '#FBD437', '#4482FF']
    },
    complaintProps: {
      title: '用户投诉占比分析',
      options: ['年', '月', '日'],
      color: ['#4A8FFF', '#E7472C', '#00CEDB']
    }
  }
  // 生成echarts图
  getEcharts = () => {
    // echartsModule echarts数据源  dateKey 当前echarts右上角 时间选择标记  val 当前是哪个 饼图
    const { echartsModule, val } = this.props;
    const echartsData = echartsModule.filter(x => x.name === val);
    const echartsOption = {
      containerStyle: { width: '100%', height: 300 },
      option: {}
    }
    let option = {};
    return (
      echartsData.map(ele => {
        const { name, data } = ele;
        const { title, color } = this.echartsConfig[name];
        const legendData = [];
        data.forEach(x => { legendData.push(x.name) });
        option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: '30',
            top: '40',
            data: legendData
          },
          series: [
            {
              name: title,
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: data,
              color
            }
          ]
        };
        echartsOption.option = option;
        return (
          <div key={name} className={styles.echarts_main} >
            {<CommonEchartComp {...echartsOption} />}
          </div>
        )
      })
    )
  }

  render() {
    return (
      <>
        {this.getEcharts()}
      </>
    )
  }
}
